html {
    height: 100%
}

body {
    display: flex;
    flex-direction: column;
    max-width: 640px;
    min-height: 100vh;
    max-width: 100vh;
    height: 100%;
    margin: 0 auto;
}

.score {
    text-align: center;
    line-height: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    flex-grow: 0;

    .title {
        font-weight: 600;
    }

    #score {
        margin-left: 1rem;
    }

}

.main {
    flex-grow: 1;
    box-sizing: border-box;
    position: relative;
    margin: 0 2rem;
    height: 100%;
    border: 1px solid gray;
    overflow: hidden;
}

.con {
    position: relative;
    top: -100%;
    height: 100%;

    .row {
        display: flex;
        flex-wrap: wrap;
        height: 20%;

        .cell {
            box-sizing: border-box;
            flex-basis: 25%;
            height: 100%;
            background-color: #fff;
        }

        & .cell:not(:last-child) {
            border-right: 1px solid rgb(133, 133, 133);
        }

        .cell.black {
            background-color: rgb(54, 54, 54);
        }
    }

    .row:not(:first-child) {
         border-bottom: 1px solid rgb(133, 133, 133);
    }
}

.btn {
    flex-grow: 0;
    width: 100%;
    text-align: center;
}

.start {
    margin: 1rem auto;
    width: 10rem;
    height: 50px;
    border-radius: 10px;
    background: yellowgreen;
    line-height: 50px;
    color: #fff;
    outline: none;
}